<template>
	<view class="lease-goods-container">
		<!-- Header -->
		<view class="header">
			<!-- 吸顶栏 -->
			<u-sticky offset-top="0" h5-nav-height="0" bgColor="transparent">
				<!-- 搜索 -->
				<navigator hover-class="none" url="/pages/goods_search/goods_search">
				<view class="search row">
					<!-- <u-search class="flex1" shape="round"  bg-color="#ffffff" /> -->
					<image src="/static/images/lease-ss.png" mode="aspectFit"></image>
					<input type="text" disabled="true" placeholder="搜索你想要的商品" />
					<text>搜索</text>
				</view>
				</navigator>
			</u-sticky>
		</view>

		<!-- Main -->
		<view class="main">
			<!-- 商品分类 -->
			<scroll-view scroll-y="true" class="left-contain">
				<view class="left-contain-item">
					<view :class="{ 'left-contain-avtive': !classify_id }" @tap="onClassify('')">
						<view class="left-contain-tip" v-if="!classify_id"> </view>
						全部
					</view>
					<block v-for="item in leaseClassifyList" :key="item.id">
						<view @tap="onClassify(item.id)" :class="{ 'left-contain-avtive': classify_id == item.id }"
							class="line-1">
							<view class="left-contain-tip" v-if="classify_id == item.id"> </view>
							{{ item.name.slice(0, 4) }}
						</view>
					</block>
				</view>
			</scroll-view>

			<!-- 商品列表 -->
			<view class="right-contain">
				<mescroll-uni ref="mescrollRef" :height="height" :fixed="false" bgColor="white" @init="mescrollInit"
					:down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
					<view v-for="(item, index) in goodsList" :key="item.id"
						style="height: 100%;padding: 32rpx 24rpx;padding-bottom: 0;" @tap="goGoodsDetail(item.id)">
						<view class="goods-container">
							<u-image width="150" height="150" :src="item.image" :border-radius="20" />
							<view class="ml20 goods-container-right">
								<view class="goods-name">
									{{ item.name }}
								</view>
								<view class="row-between">
									<view class="ornament goods-price">
										<text class="xs" style="color: #E63333;">¥</text>
										<text class="xxl mr5" style="color: #E63333;">{{item.price}}</text>
										<!-- 	<text class="xxl">{{
                                            formatPrice(item.price, 'integer')
                                        }}</text>
										<text class="xs">{{
                                            formatPrice(item.price, 'decimals')
                                        }}</text> -->
										<text class="xs " style="color: #E63333;">/天</text>
									</view>
									<view class="xs" style="color: #00000066;">{{item.period_desc}}</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLeaseClassify,
		getLeaseGoodsList
	} from '@/api/lease.js'

	import {
		getSearchpage,
		clearSearch
	} from '@/api/store'
	import {
		getRect,
		px2rpx
	} from '@/utils/tools'
	import {
		loadingFun,
		formatPrice
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
	export default {
		mixins: [MescrollMixin],

		data() {
			return {
				page: 1, // 当前数据页面
				goodsList: [], // 商品列表数据
				classify_id: '', // 分类ID
				leaseClassifyList: [], // 租赁分类列表
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 自动加载
					noMoreSize: 4,
					empty: {
						icon: '/static/images/shop.png',
						tip: '暂无商品数据',
						fixed: true,
						top: '200rpx'
					}
				},
				height: 0
			}
		},

		computed: {
			comprehensive() {
				const priceSort = this.priceSort
				const saleSort = this.saleSort
				return !priceSort && !saleSort ? true : false
			}
		},

		onLoad(options) {
			// 获取分类列表数据
			getLeaseClassify().then((res) => {
				if (res.code != 1) return
				this.leaseClassifyList = res.data
			})
		},
		async onShow() {
			this.mescroll.resetUpScroll()
		},

		methods: {
			upCallback(page) {
				let num = page.num
				let size = page.size

				getLeaseGoodsList({
						page_no: num,
						page_size: size,
						category_id: this.classify_id
					})
					.then(({
						data
					}) => {
						if (page.num == 1) this.goodsList = [] //如果是第一页需手动置空列表
						this.goodsList = this.goodsList.concat(data.list) //追加新数据
						this.mescroll.endSuccess(data.list.length, data.count)
					})
					.catch((err) => {
						console.log(err)

						this.mescroll.endErr()
					})
			},
			// 格式化价格输出
			formatPrice,

			// 点击分类
			onClassify(goods_id) {
				this.classify_id = goods_id
				this.upCallback({
					num: 1,
					size: 10
				})
			},

			// 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then((res) => {
					if (res.code != 1) return
					const data = res.data
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				})
			},

			// 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh()
			},

			// 查看商品详情
			goGoodsDetail(goods_id) {
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + goods_id
				})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 0 !important;
		height: 100%;
	}

	.lease-goods-container {
		height: 100%;
	}
</style>

<style scoped lang="scss">
	.lease-goods-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.search {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 76rpx;
		// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03); 
		border-radius: 150rpx;
		background-color: #ffffff;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-left: 28rpx;
		}
		input{
			width: 75%;
			background-color: #ffffff;
			color: #000000e6;
		}
		text{
			color: #2482EE;
			padding-left: 20rpx;
			border-left: 1rpx solid #00000010;
			
		}
		
		
	}

	.search--cancel {
		padding-right: 20rpx;
	}

	.main {
		display: flex;
		flex: 1;
		min-height: 0;
	}

	.left-contain {
		height: 100%;
		width: 180rpx;
		background-color: #FBFBFD;
	}

	.left-contain-item {
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.left-contain-avtive {
		position: relative;
		height: 96rpx;
		background-color: #ffffff;
		color: #000000e6;
		font-size: 28rpx;
		font-weight: 500;
	}

	.left-contain-tip {
		position: absolute;
		left: 0;
		top: 28rpx;
		width: 8rpx;
		background-color: #2482EE;
		height: 40rpx;
		z-index: 999;
		border-radius: 10rpx;
	}

	.right-contain {
		height: 100%;
		background-color: #ffffff;
		width: 570rpx;
	}

	.goods-container {
		display: flex;
		/* padding: 20rpx; */
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #00000005;
	}

	.goods-name {
		width: 350rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 80rpx;
		color: #000000e6;
		font-size: 30rpx;
	}

	.goods-container-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header {
		padding: 24rpx;
		background-color: #FBFBFD;
	}
</style>